<template>
  <div class="container">
    <div id="map"></div>
    <el-button class="join-btn" @click="setlayoutPropertiers" type="primary">{{btnInto}}</el-button>
  </div>
</template>

<script>
import "mapbox-gl/dist/mapbox-gl.css";
import mapboxgl from "mapbox-gl";
import { genetorGeoJosn,drawCanvas } from "../../src/utils/dataUtils";
export default {
  name: "Vue2MapboxMapTemplate",
  data() {
    return {
      map: null,
      btnInto: '关闭碰撞检测',
      frag: false,
    };
  },

  mounted() {
    this.initMap();
  },

  methods: {
    initMap() {
      mapboxgl.accessToken =
        "pk.eyJ1IjoiY3Vpaml5aW5nIiwiYSI6ImNsZ3QyZjY4ODAxbDEza3BkOTJqbTJvN3gifQ.Ldj9qAFzb5uzcLP-VtFB3A";
      this.map = new mapboxgl.Map({
        container: "map",
        style: "mapbox://styles/cuijiying/cll09l2nz007w01picbmj3e1z",
        center: [118.601604, 31.905137],
        zoom: 5,
      });
      
      let jsonData = genetorGeoJosn(
        {
          ymax: 41.072443,
          ymin: 25.905137,
          xmax: 121.601604,
          xmin: 100.495696,
        },
        2000
      );

      // load事件
      this.map.on("load", () => {
        drawCanvas().forEach(item => {
          this.map.loadImage(
            // 'https://s2.cn.bing.net/th?id=OJ.AR0cTRmf9y09BQ&w=120&h=120&c=8&rs=1&pid=academic',
            item.imgUrl,
            (error, image) => {
              if (error) throw error;
              this.map.addImage(item.id, image);
            }
          );
        })

        this.map.addSource("earthquakes", {
          type: "geojson",
          // data: "https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",
          data: jsonData,
          // cluster: true,
          // clusterMaxZoom: 14, // Max zoom to cluster points on
          // clusterRadius: 50, // Radius of each cluster when clustering points (defaults to 50)
        });

        this.map.addLayer({
          id: "points",
          type: "symbol",
          source: "earthquakes",
          layout:{
            'icon-image': 'tri',
            // 'icon-image': [
            //   'match',
            //   ['get', 'attribute'], // 替换为您的属性字段名
            //   'value1', 'icon1', // 替换为范围1对应的图标名称
            //   'value2', 'icon2', // 替换为范围2对应的图标名称
            //   'value3', 'icon3', // 替换为范围3对应的图标名称
            //   'default-icon' // 默认图标名称
            // ],
            "text-field": "{type}",
            'symbol-sort-key': ['get', 'type'], // 设置 symbol-sort-key
            // 'symbol-z-order': 'source'
            // 'icon-allow-overlap': true,
            // 'text-allow-overlap': true
          }
          // filter: ["has", "point_count"],
          // paint: {
          //   "circle-color": "#11b4da",
          //   "circle-radius": 4,
          // },
        });
      });

      // var thresholdPixels = 4; // 设置重叠阈值，即判定为重叠的像素容差

      this.map.on("idle", () => {
        const sourceFeatures = this.map.querySourceFeatures("earthquakes", {
          // filter: ["!", ["has", "point_count"]],
        });
        console.log(sourceFeatures, "sourceFeatures===============");

      });
    },
    setlayoutPropertiers(){
      this.frag = !this.frag;
      this.btnInto = this.frag ? "打开碰撞检测" : '关闭碰撞检测';
      // this.map.setLayoutProperty('points', 'visibility', 'none');
      this.map.setLayoutProperty('points', 'icon-allow-overlap', this.frag);
      this.map.setLayoutProperty('points', 'text-allow-overlap', this.frag);
    }
  },
};
</script>

<style>
.join-btn{
  position: absolute;
  top: 20px;
  left: 50px;
}
</style>
